<template>
  <b-echart class="charts" :options="options"></b-echart>
</template>
<script setup lang="ts">
import BEchart from '@/components/b-echart/index.vue'
import { ref, onMounted, onUnmounted } from 'vue'
import { getPersonTimeAxis } from '@/api/person'
import * as echarts from 'echarts'

const options = ref({
  tooltip: {
    trigger: 'axis'
  },
  grid: [
    {
      top: '32',
      left: '48',
      right: '24',
      bottom: '24'
    }
  ],
  xAxis: {
    type: 'category',
    data: [],
    axisLine: {
      lineStyle: {
        color: '#ffffff'
      }
    },
    nameTextStyle: {
      color: '#ffffff'
    }
  },
  yAxis: {
    name: '单位：个',
    type: 'value',
    axisLine: {
      lineStyle: {
        color: '#ffffff'
      }
    },
    nameTextStyle: {
      color: '#ffffff'
    }
  },
  series: [
    {
      type: 'line',
      data: [],
      symbol: 'none',
      sampling: 'lttb',
      itemStyle: {
        color: '#00ffa7'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 255, 167)'
          },
          {
            offset: 1,
            color: 'rgba(0, 255, 167, 0.1)'
          }
        ])
      }
    }
  ]
})

async function initChart() {
  const { data } = await getPersonTimeAxis()
  options.value.series[0].data = []
  options.value.xAxis.data = []
  data.forEach((data) => {
    options.value.series[0].data.push({
      value: data.inCount,
      time: data.inTime
    })
    options.value.xAxis.data.push(data.inTime)
  })
}

let interval = null
onMounted(() => {
  initChart()
  // 每10分钟更新一次
  interval = setInterval(() => {
    initChart()
  }, 600000)
})

onUnmounted(() => {
  clearInterval(interval)
})
</script>
<style scoped lang="scss">
.charts {
  width: 100%;
  height: 100%;
}
</style>
